其他
B端页面——详细表格设计流程
作者:🌟大星星🌟(转载 已取得作者授权)
展示形式:标签+数据+操作按钮; 数据结构:一对多; 常见模式:待办事项、走查清单、动态等; 前端类别:有序列表(<0l><li>)和无序列表(<ul><li>并列关系)。
展示形式:标签+数据+操作按钮; 数据结构:一对多; 常见模式:excle; 前端类别:行(<tr>)、列(<td>)、表头(<th>)ps:在前端眼中列是由行拼接组成,没有单独列的概念。
展示形式:标签+输入域+提示信息+操作按钮; 数据结构:一对一; 常见模式:登录页、个人信息录入等; 前端类别:这里的数据类型较多例如文本text、密码输入password、单选框radio、复选框checkbox等。
二、设计原则与目标
1. 设计原则
保持一致,保持表格外观、布局一致,外观相同的表格用户会更快地接受,用户一次学习就可通用查看,凭肌肉记忆快速查找关键信息; 呼吸适中,表格内容区采用合适的行高和列宽,可以帮助更快地获取信息; 视觉降噪,通过字体、字号、颜色等多维度进行视觉降噪处理。
亲密性,数据选择与数据操作保持亲密性; 操作露出与操作隐藏,不同业务操作选择不同的操作形式,比用户多想一步。
三、表格构成
1. 标题
2. 筛选操作区
3. 表头
4. 内容
5. 底栏
四、表格规范
1. 标题规范
2. 表头规范
纯文本表头——仅起到解释数据属性的作用; 多功能表头——可以筛选、排序、搜索相关数据; 多级表头——信息分类层级较多数据结构较为复杂的情况下使用。
表头标签精简。检验标准:少一个字就会改变标签原意。 表头的表现形式与正文稍作区分,来凸显表头的可识别性。 表头标签与所在列数据对齐,完整显示标题。
3. 单元格规范
Margin(外边距):指内容的外边界与相邻元素之间的间距,外边距为透明。 Border(边框):指环绕在内容周围的边框路径。 Padding(内边距):指内容的外边界在其他子元素的间距。 Content(内容):指最基础的内容元素。
4. 行规范
拖拽前:要让用户知道这个表格行是可以拖拽的,可以在每行首添加图标、鼠标hover改变光标样式等。 拖拽时:要让用户知道拖动的动作的效果,对于拖出位置给予一定的样式保留,让用户知道从哪行移出的,对于目标位置,给予一定的插入位置符号提示(虚线)或拖入后预览反馈。 拖拽后:及时更新表格信息,如有排序编号等数字可在排序后更新。
6. 表格整体规范
横向分隔线:可以适用大部分数据集表格业务,是目前最常见的一种类型。 纵向分隔线:适用与对列之间产生数据对比的表格业务,可以局部适用列分隔线或斑马线。 矩阵分隔线:适用于数据非常严谨的数据场景,或者是表格没有空间留白的情况采用矩阵分隔线。 极简留白:表格留白空间足够,可以清晰地区分数据信息,在阅读时不需要适用辅助帮助的,可以采用此种样式。
内联操作 :是针对单个单元格的操作,具体操作形式前面单元格已做详细阐述。 单行操作:一般操作放置在表格的最后一列。
视觉:主按钮一般为主色填充,次按钮为灰色描边,突出主按钮样式。 交互:一般点击添加类按钮,会出现包含添加项目数据的表单。
7. 对齐规范
9. 分页规范
五、表格应用场景
1. 基础表格
2. 双栏表格
3. 树形表格
5. 交叉表格
6. 图表表格
7. 卡片表格
六、小结
RECOMMEND
点击“阅读原文”
查看更多干货